import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl, formatMessage} from './intl';
import {Card, Row, Col, Table, Spin} from 'antd';
import {TABLE, DATETIME_FORMAT} from '../constants';
import {formatDateTime, formatAmount, onDownloadHistory} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import ExpandedRowTablePanel from './ExpandedRowTablePanel';

class Detail extends React.PureComponent {
    onClickDownload = e => {
        const {id, applyid} = e.target.dataset;
        onDownloadHistory({
            filePath: id,
            fileName: applyid
        });
    }
    render() {
        const {detail = {}, loading,
            isDealerUser, operations} = this.props;
        const columns = [
            {
                title: formatMessage({
                    id: 'commonDetail.column.technologyActivityClaimCode',
                    defaultMessage: '技术升级索赔编号'
                }),
                dataIndex: 'technologyActivityClaimCode',
            },
            {
                title: formatMessage({
                    id: 'commonDetail.column.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'commonDetail.column.materialFee',
                    defaultMessage: '材料费'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'commonDetail.column.mgmtFee',
                    defaultMessage: '管理费'
                }),
                dataIndex: 'mgmtFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'commonDetail.column.assistantFee',
                    defaultMessage: '辅料费'
                }),
                dataIndex: 'assistantFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'commonDetail.column.totalFee',
                    defaultMessage: '总金额'
                }),
                dataIndex: 'totalFee',
                sorter: true,
                className: styles.textAlign,
                render: text => formatAmount(text)
            }
        ];
        return (
            <div>
                <Spin spinning={loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={6}>{formatMessage({
                            id: 'commonDetail.order.title',
                            defaultMessage: '结算单信息'
                        })}</Col>
                        <Col className={styles.optionBtn} span={18}>{operations}</Col></Row>}>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.code',
                                    defaultMessage: '技术升级结算编号'
                                })}>
                                {detail.code}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.brand',
                                    defaultMessage: '品牌'
                                })}>
                                {`(${detail.brandCode})${detail.brandName}`}
                            </Description>
                            {isDealerUser ? null
                                : <Description
                                    term={formatMessage({
                                        id: 'commonDetail.info.dealerCode',
                                        defaultMessage: '总代'
                                    })}>
                                    {`(${detail.dealerCode})${detail.dealerName}`}
                                </Description>}
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.technologyActivityName',
                                    defaultMessage: '技术升级主题'
                                })}>
                                {detail.technologyActivityName}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.startTime',
                                    defaultMessage: '开始时间'
                                })}>
                                {formatDateTime(detail.startTime, DATETIME_FORMAT)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.endTime',
                                    defaultMessage: '技术升级截止日期'
                                })}>
                                {formatDateTime(detail.endTime, DATETIME_FORMAT)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.laborFee',
                                    defaultMessage: '工时费'
                                })}>
                                {formatAmount(detail.laborFee)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.materialFee',
                                    defaultMessage: '材料费'
                                })}>
                                {formatAmount(detail.materialFee)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.mgmtFee',
                                    defaultMessage: '管理费'
                                })}>
                                {formatAmount(detail.mgmtFee)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.assistantFee',
                                    defaultMessage: '辅料费'
                                })}>
                                {formatAmount(detail.assistantFee)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.totalFee',
                                    defaultMessage: '费用合计'
                                })}>
                                {formatAmount(detail.totalFee)}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.approverName',
                                    defaultMessage: '审核人'
                                })}>
                                {detail.approverName}
                            </Description>
                            <Description
                                term={formatMessage({
                                    id: 'commonDetail.info.approveTime',
                                    defaultMessage: '审核时间'
                                })}>
                                {formatDateTime(detail.approveTime, DATETIME_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'commonDetail.info.approveComment',
                                defaultMessage: '审核意见'
                            })}>
                                {detail.approveComment}
                            </Description>
                            <Description term={formatMessage({
                                id: 'commonDetail.info.remark',
                                defaultMessage: '备注'
                            })}>
                                {detail.remark}
                            </Description>
                        </DescriptionList>
                    </Card>
                    <Card>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            rowKey="technologyActivityClaimId"
                            pagination={false}
                            dataSource={detail.details}
                            expandedRowRender={record => <ExpandedRowTablePanel
                                data={record.settlementDetails}/>}
                            {...TABLE} />
                    </Card>
                </Spin>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
    showBrand: false,
};

Detail.propTypes = {
    detail: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
    showBrand: PropTypes.bool
};
export default injectIntl(Detail);
